<template>
  <div class="condition-query-root">

    <div class="input-container">
      <el-input placeholder="请输入内容" v-model="inputValue">
        <template slot="append">
          <el-button @click="open = !open" icon="el-icon-search"></el-button>
          <el-button @click="submit" icon="el-icon-search"></el-button>
        </template>
      </el-input>
    </div>

    <el-collapse-transition>
      <div v-show="open" class="query-container">

        <div class="query-item q-date">
          <div class="q-i-content">
            <el-date-picker
              v-model="date"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </div>
        </div>

        <div class="query-item q-bread">
          <div class="q-i-content">

            <area-select v-model="area"></area-select>

          </div>
        </div>

        <div class="query-item q-button">
          <div class="q-i-content">
            <el-radio-group v-model="queryType">
              <div class="r-item-container">
                <el-radio-button v-for="item in queryTypeList" :key="item.value" :label="item.value">{{item.label}}
                </el-radio-button>
              </div>
            </el-radio-group>
          </div>
        </div>

      </div>
    </el-collapse-transition>

  </div>
</template>

<script>
  import { reactive, toRefs, onMounted, ref, computed } from '@vue/composition-api'
  import { Message, MessageBox } from 'element-ui'
  import store from '@/store'
  import router from '@/router'
  import areaSelect from '../areaSelect'

  export default {
    name: 'conditionQuery',
    props: {},
    components: {
      areaSelect
    },
    setup(props, content) {

      let {} = props

      let end = new Date()
      let start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)

      const data = reactive({
        open: false,              //  打开下拉面板标记
        inputValue: '',           //  输入内容
        pickerOptions: {
          shortcuts: [{
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一年',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三年',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365 * 3)
              picker.$emit('pick', [start, end])
            }
          }]
        },     //  日期快捷选择
        date: [start, end],                 //  日期
        queryType: 'zz',            //  查询类型
        queryTypeList: [
          {
            label: '种质',
            value: 'zz'
          },
          {
            label: '标本',
            value: 'bb'
          },
          {
            label: '土壤',
            value: 'tr'
          }
        ],
        area: ['nm', 'hhht']                  //  选中的区域
      })

      const reset = () => {
        data.inputValue = ''
        data.date = [start, end]
        data.queryType = 'zz'
        data.area = ['nm', 'hhht']
      }

      //  提交数据
      const submit = () => {

        let { inputValue, date, queryType, area } = data

        if (!queryType || queryType === '') {
          Message.error('请选择查询类型')
          return
        }

        if (!inputValue || inputValue === '') {
          Message.error('请输入查询条件')
          return
        }

        data.open = false

        let result = {}

        addAttribute(result, 'inputValue', inputValue)
        addAttribute(result, 'queryType', queryType)

        if (date && date !== '') {
          let [startDate, endDate] = date
          addAttribute(result, 'startDate', startDate)
          addAttribute(result, 'endDate', endDate)
        }

        if (area?.length) {
          let [province, city, county] = area
          addAttribute(result, 'province', province)
          addAttribute(result, 'city', city)
          addAttribute(result, 'county', county)
        }
        reset()
        content.emit('query', result)
      }

      const addAttribute = (res, key, value) => {
        if (!value) return
        res[key] = value
      }

      return { ...toRefs(data), submit }
    }
  }
</script>

<style lang="scss">
  $full: 100%;
  .condition-query-root {
    min-width: 360px;
    width: max-content;
    height: max-content;

    .input-container {
      .el-input {
        .el-input-group__append {
          border: none;

          .el-button {
            border-radius: 0;
          }

          > .el-button:first-child {
            position: relative;
            right: 10px;
          }
        }
      }
    }

    .query-container {
      height: max-content;
      width: $full;
      background: pink;
      display: flex;
      flex-direction: column;
      padding: 5px;

      .query-item {
        flex-basis: 45px;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;

        .q-i-content {
          width: max-content;

          .el-cascader {

            .el-input {

              .el-input__inner {
                width: 350px;
              }
            }
          }

          .el-radio-group {
            width: $full;

            .r-item-container {
              display: flex;
              flex-direction: row;
              justify-content: center;

              .el-radio-button {
                flex: 1;
                display: flex;
                flex-direction: row;
                justify-content: center;
              }
            }
          }
        }

        &.q-button {
          .q-i-content {
            width: 100%;
          }
        }
      }
    }
  }
</style>
